{extend name='layout/default'/}
{block name='main'}
<div id="control">
    {include file='admin/menu' /}
    <div class="rightControl">
        <table class="layui-hide" id="user" lay-filter="user"></table>
        <script type="text/html" id="toolbarDemo">
           <div style="display: flex;align-items: center">
               <form class="layui-form" lay-filter="tableSearch" style="display: flex;align-items: center">
                   <input type="text" lay-affix="clear" name="mobile"
                          placeholder="手机号码 / 电子邮箱" class="layui-input"
                          style="height: 34px;width: 200px;border-radius: 5px">
                   <input type="text" lay-affix="clear" name="uid"
                          placeholder="UID" class="layui-input ml"
                          style="height: 34px;width: 200px;border-radius: 5px">
                   <input type="text" lay-affix="clear" name="path"
                          placeholder="文件地址" class="layui-input ml"
                          style="height: 34px;width: 200px;border-radius: 5px">
                   <button class="layui-btn lay-submit layui-btn-sm ml layui-btn-normal" lay-submit
                           lay-filter="demo-table-search">搜索
                   </button>
                   <button type="reset" class="layui-btn layui-btn-sm layui-btn-danger">重置</button>
               </form>
               <button class="layui-btn layui-btn-sm layui-btn-radius layui-bg-orange" style="margin-left: auto" lay-event="delSelect">删除选中数据</button>
           </div>
        </script>
        <script type="text/html" id="barDemo">
            <div class="layui-clear-space">
                <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
            </div>
        </script>
        <script>
            const params = new URLSearchParams(location.search);
            layui.use(function () {
                const table = layui.table;
                const form = layui.form;
                // 创建渲染实例
                table.render({
                    elem: '#user',
                    toolbar: '#toolbarDemo',
                    url: '/index/admin/images',
                    method: 'post',
                    height: 'full-140',
                    autoSort: false, // 禁用前端自动排序。
                    limit: 30,
                    width: $(".rightControl").width(),
                    page: {
                        groups: 5
                    },
                    where:{
                        uid:params.get("uid")||''
                    },
                    initSort: {
                        field: 'id',
                        type: 'desc',
                    },
                    lineStyle: 'height: 80px;', // 定义表格的多行样式
                    parseData: function (res) {
                        return {
                            "code": 0, //解析接口状态
                            "msg": res.msg, //解析提示文本
                            "count": res.data.total, //解析数据长度
                            "data": res.data.data //解析数据列表
                        };
                    },
                    done: function () {
                        $(".photo").off("click").on("click", function () {
                            layer.photos({
                                photos: { // 图片层的数据源
                                    "data": [   // 相册包含的图片，数组格式
                                        {
                                            "alt": "图片名",
                                            "pid": 666, // 图片id
                                            "src": $(this).attr("data-url"), // 原图地址
                                            "thumb": $(this).attr("src") // 缩略图地址
                                        },
                                    ]
                                },
                                tab: function (data, layero) { // 图片层切换后的回调
                                    console.log(data); // 当前图片数据信息
                                    console.log(layero); // 图片层的容器对象
                                }
                            });
                        })
                    },
                    cols: [[
                        {checkbox: true, fixed: true},
                        {field: 'id', width: 100, sort: true, align: "center", title: '图片ID'},
                        {
                            field: 'murl',
                            width: 90,
                            title: '缩略图',
                            align: "center",
                            templet: function (row) {
                                return `<img src='${row.murl}' data-url="${row.url}" class="photo" style='width: 60px;height: 60px;object-fit: contain' alt=""/>`;
                            }
                        },
                        {field: 'uid', width: 100, title: '用户UID', align: "center",},
                        {
                            field: 'width',
                            title: '宽度', align: "center", width: 100
                        },
                        {
                            field: 'height',
                            title: '高度', align: "center", width: 100
                        },
                        {
                            field: 'size',
                            title: '文件大小', align: "center", width: 120, templet: function ({size}) {
                                return formatBytes(size)
                            }
                        },
                        {field: 'addtime', sort: true, title: '上传时间', align: "center", width: 160},
                        {
                            field: 'folder', title: '文件夹', align: "center", width: 200, templet: function (row) {
                                var {folder} = row;
                                if (!folder) {
                                    folder = {}
                                }
                                const {name = '默认目录'} = folder
                                return name
                            }
                        },
                        {
                            field: 'filename',
                            title: '文件名', align: "center", width: 120, templet: function ({filename}) {
                                return `<div style="word-break: break-all;white-space: initial;text-align: center;width: 100%">${filename == null ? '未获取' : filename}</div>`;
                            }
                        },
                        {
                            field: 'path',
                            title: '文件地址', align: "center", width: 320,
                            templet: function (row) {
                                return `<div style="word-break: break-all;white-space: initial;text-align: center;">${row.path}</div>`;
                            }
                        },
                        {field: 'update_time', sort: true, title: '更新时间', align: "center", width: 160},
                        {title: '操作', align: "center", width: 80, toolbar: '#barDemo', fixed: 'right'}
                    ]],
                });
                table.on("tool(user)", function (obj) {
                    const {event = '', data} = obj;
                    if (event === 'del') {
                        layer.confirm('是否删除图片文件？', {icon: 3}, function () {
                            $.ajax({
                                url: '/index/admin/images_del',
                                type: 'post',
                                data: {
                                    id: data.id
                                },
                                success: res => {
                                    layer.msg(res.msg)
                                    if (res.code === 1) {
                                        table.reload("user")
                                    }
                                }
                            })
                        }, function () {
                            layer.msg('已取消删除');
                        });
                    }
                })
                // 触发排序事件
                table.on('sort(user)', function (obj) {
                    // 尽管我们的 table 自带排序功能，但并没有请求服务端。
                    // 有些时候，你可能需要根据当前排序的字段，重新向后端发送请求，从而实现服务端排序，如：
                    table.reload('user', {
                        initSort: obj, // 记录初始排序，如果不设的话，将无法标记表头的排序状态。
                        where: { // 请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                            field: obj.field, // 排序字段
                            order: obj.type // 排序方式
                        }
                    });
                });
                form.on('submit(demo-table-search)', function (data) {
                    const field = data.field; // 获得表单字段
                    // // 执行搜索重载
                    table.reload('user', {
                        page: {
                            curr: 1 // 重新从第 1 页开始
                        },
                        where: field, // 搜索的字段,
                    });
                    form.val('tableSearch', field);
                    $("[type='reset']").click(function () {
                        table.reload('user', {
                            page: {
                                curr: 1 // 重新从第 1 页开始
                            },
                            where: {}, // 搜索的字段,
                        });
                    })
                    return false; // 阻止默认 form 跳转
                });
                table.on('toolbar(user)', function (obj) {
                    const id = obj.config.id;
                    const checkStatus = table.checkStatus(id);
                    if (obj.event === 'delSelect') {
                        const ids = checkStatus.data.map(el => {
                            return el.id
                        })
                        if(ids.length===0){
                            return layer.msg("请选择要删除的图片");
                        }
                        layer.confirm('是否删除图片文件？', {icon: 3}, function () {
                            $.ajax({
                                url: '/index/admin/images_del',
                                type: 'post',
                                data: {
                                    id: ids.join(",")
                                },
                                success: res => {
                                    layer.msg(res.msg)
                                    if (res.code === 1) {
                                        table.reload("user")
                                    }
                                }
                            })
                        }, function () {
                            layer.msg('已取消删除');
                        });
                    }
                });
            });
        </script>
    </div>
</div>
<style>
    td > .layui-table-cell {
        height: 60px !important;
        align-items: center;
        display: flex;
        justify-content: center;
    }
</style>
{/block}